import TinyReact from './TinyReact';
const root = document.getElementById('root');
const virtualDOM = (
  <div className="container">
    <h1 id="ls">你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert('你好')}>点击我</button>
    <h3>这个将会被删除</h3>
    <div>
      <input value="李珊" />
    </div>
    <div>
      <input type="checkbox" checked />
    </div>
    2, 3
  </div>
);
// TinyReact.render(virtualDOM, root)

const modifyDOM = (
  <div className="container">
    <h1 id="ls">你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段修改之后的内容</span>
    <button onClick={() => alert('你好!!!!')}>点击我</button>
    <ul>
      <li>1111111</li>
    </ul>
    2, 3
  </div>
);

// setTimeout(() => {
//   TinyReact.render(modifyDOM, root)
// }, 2000)

function Demo(props) {
  return <h1>Hello Demo {props.title}</h1>;
}
function Heart() {
  return <Demo title="标题" />;
}
// TinyReact.render(<Heart/>, root)

class Alert extends TinyReact.Component {
  // 实例化子类时传递了 props
  constructor(props) {
    // 将 props 传递给父类
    super(props);
    this.state = {
      title: '默认title',
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      title: '改变title',
    });
  }
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }
  render() {
    console.log('render');
    return (
      <div>
        {this.props.name}
        <h1>{this.state.title}</h1>
        <button onClick={this.handleClick}>改变title</button>
      </div>
    );
  }
}
// TinyReact.render(<Alert name="张三" />, root);
// setTimeout(() => {
//   TinyReact.render(<Alert name="李珊" />, root);
//   // TinyReact.render(<Heart name="李四" />, root);
// }, 2000);

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this.input.value);
    console.log(this.alert);
  }
  componentDidMount() {
    console.log('componentDidMount');
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.handleClick}>按钮</button>
        <Alert
          name="李珊"
          ref={(alert) => {
            this.alert = alert;
          }}
        />
      </div>
    );
  }
}
TinyReact.render(<DemoRef />, root);
